<template>
    <div class="" style="text-align: center;margin: auto 0;">
        <div style="margin: 20px;display: flex">
            <div style="flex: 1" class="topCard">
                <div style="text-align: center;">
                    <div>用户总数</div>
                    <p>{{ userTotal }}</p>
                </div>
            </div>
            <div style="flex: 1" class="topCard">
                <div style="text-align: center;">
                    <div>老人总数</div>
                    <p>{{ oldTotal }}</p>
                </div>
            </div>
            <div style="flex: 1" class="topCard">
                <div style="text-align: center;">
                    <div>活动总数</div>
                    <p>{{ activityTotal }}</p>
                </div>
            </div>
            <div style="flex: 1" class="topCard">
                <div style="text-align: center;">
                    <div>资讯总数</div>
                    <p>{{ infoTotal }}</p>
                </div>
            </div>
        </div>
        <div style="margin: 20px; display: flex; grid-gap: 10px">
            <div style="flex: 1;margin-right: 50px;" class="echCard">
                <EchartsComponent :option="optionPie" :width="width" />
            </div>
            <div style="flex: 1" class="echCard">
                <EchartsComponent :option="optionBar" :width="width" />
            </div>
        </div>
        <!-- <button @click="chanegWith">点击改变宽度</button>
        {{ homeActivityData }} <br><br>
        {{ homeInfoData }} -->
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'



export default {
    components: {
        EchartsComponent: () => import('@/components/EchartsComponent.vue'),
    },
    data() {
        return {
            width: '500px',
            pieData: [],
        };
    },
    mounted() {
        this.homeActivityActions();
        this.homeInfoActions();
        this.pageQueryUserListActions({ pageNum: 1, pageSize: 1 });
        this.pageQueryOldListActions({ pageNum: 1, pageSize: 1 });
        this.pageQueryInfoActions({ pageNum: 1, pageSize: 1 });
        this.pageQueryactivityListActions({ pageNum: 1, pageSize: 1 });
        // this.getData();
    },
    computed: {
        // 指定图表的配置项和数据
        optionBar() {
            return {
                title: {
                    text: '活动类别数量统计',
                    left: 'center',
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    // data: ['销量']
                },
                xAxis: {
                    // data: []
                    type: 'category',
                    data: this.homeActivityData.map(v => v.name),
                    axisLabel: {//坐标轴刻度标签的相关设置。
                        interval: 0,
                        rotate: "30"
                    },
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        type: 'bar',
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                                /*  normal: {
                                     color: function (params) { // 根据索引返回对应的颜色
                                         let colorList = ['#ffaa2e', '#32C5E9', '#fa4c4c', '#08b448', '#FFDB5C', '#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3']
                                         return colorList[params.dataIndex];
                                     }
                                 } */
                            }
                        },
                        // data: []
                        data: this.homeActivityData.map(v => v.value),
                    }
                ]
            }
        },
        optionPie() {
            return {
                title: {
                    text: '资讯类别数量统计',
                    subtext: '比例图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        type: 'pie',
                        radius: '50%',
                        data: this.homeInfoData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            show: true,
                            formatter(param) {
                                return param.name + ' (' + param.percent + '%)';
                            }
                        },
                    }
                ]
            }
        },

        ...mapState('home', ['homeActivityData', 'homeInfoData']),
        ...mapState('user', ['userTotal']),
        ...mapState('old', ['oldTotal']),
        ...mapState('info', ['infoTotal']),
        ...mapState('activity', ['activityTotal'])
    },
    methods: {
        ...mapActions('home', ['homeActivityActions', 'homeInfoActions']),
        ...mapActions('user', ["pageQueryUserListActions"]),
        ...mapActions('old', ["pageQueryOldListActions"]),
        ...mapActions('info', ['pageQueryInfoActions']),
        ...mapActions('activity', ['pageQueryactivityListActions']),

        chanegWith() {
            if (this.width == '600px') {
                this.width = '800px';
            } else {
                this.width = '600px'
            }
        },
        getData() {
            const homeActivityDataArray = [...this.homeActivityData];
            homeActivityDataArray.forEach(item => {
                this.pieData.push({
                    value: item.value,
                    name: item.name
                })
            })
            console.log('this.pieData', this.pieData);
        },
        // barOption.xAxis.data = res.data?.map(v => v.name)
    },
};
</script>

<style lang="scss" scoped>
.topCard {
    padding: 20px;
    margin: 5px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}

.echCard {
    padding: 20px;
    // margin: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}

p {
    font-size: 20px;
    font-weight: bold;
    color: #2F89FC;
}
</style>